<template>
	<view class="container">
		<!-- LOGO -->
		<view class="img-wrap"> <img class="img" src="../../static/logo.png" alt="" /></view>
		<view class="">
			<view class="button-area">
				<text class="text1">{{text1}}</text>
				<text class="text2">{{text2}}</text>
				<text class="text3">{{text3}}</text>
			</view>
			<!-- 输入框 -->
			<view class="button-input">
				<view class="input">
					<uv-input v-model="query.loginName" placeholder="请输入手机号" border="none" clearable></uv-input>
				</view>
				<view class="input1">
					<uv-input v-model="query.password" placeholder="请输入密码" password="true" border="none"
						clearable></uv-input>
				</view>
			</view>
			<view class="button-wrap">
				<!-- 账号登录 -->
				<button class="button-login" @click="navigateToAccountLogin">
					<text class="wx-login loginText1">{{accountLogin}}</text>
				</button>
				<view class="button-create">
					<button class="create" @click="CAPTCHA">
						<text style="color: #fff;font-size: 25rpx;" class="">动态密码登录</text>
					</button>
					<button class="create1" open-type="getPhoneNumber" @getphonenumber="getUserPhone">
						<text style="color: #fff;font-size: 25rpx;" class="">微信登录</text>
					</button>
				</view>
			</view>

			<view class="account-text">
				<text class="wx-text" @click="forget">{{forgotPassword}}</text>
				<text style="margin: 0px 20rpx 0 20rpx;margin-top: 10%;">|</text>
				<text class="wx-text-1" @click="buttonText">{{accountText}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		login,
		getOpenId
	} from '@/network/login.js';
	import {
		mchUser
	} from "../../network/merchant.js"
	import tabBar from '@/utils/tabbar.js'
	export default {
		data() {
			return {
				query: {
					loginName: "",
					password: ""
				},
				accountLogin: '登录',
				forgotPassword: "忘记密码",
				accountText: '创建账户',
				text1: "登录账户",
				text2: "使用手机号码和密码登录",
				text3: "以使用您的账户"
			}
		},
		methods: {
			navigateToAccountLogin() {
				if (this.query.loginName !== '' && this.query.password !== '') {
					login(this.query).then(res => {
						console.log(res)
						const code = res.data.code;
						if (code == "000000") {
							uni.setStorageSync("token", res.data.data.Authorization);
							uni.showToast({
								title: '登录成功',
								icon: 'success',
								duration: 2000
							})
							this.merchantList()
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							})
						}
					}).catch(err => {
						// console.log(err)
					})
				} else {
					uni.showToast({
						title: '请录入登录信息...',
						icon: 'none',
						duration: 2000
					})
				}
			},

			getUserPhone(e) {
				let that = this;
				var p = this.getSetting();
				p.then(function(isAuth) {
					console.log('是否已经授权', isAuth);
					if (isAuth) {
						wx.login({
							success(res) {
								console.log(res)
								let code = res.code
								let arr = {
									appId: "wxf22c938ec8cdbc08",
									code: code,
								}
								//接下来就是访问接口.
								getOpenId(arr).then(res => {
									console.log(res)
									const code = res.data.code;
									if (code == "000000") {
										login({
											openId: res.data.data.openId
										}).then(res => {
											console.log(res)
											const code = res.data.code;
											if (code == "000000") {
												uni.setStorageSync("token", res.data.data
													.Authorization);
												uni.showToast({
													title: '登录成功',
													icon: 'success',
													duration: 2000
												})
												that.merchantList()
											} else {
												uni.showToast({
													title: res.data.message,
													icon: 'none',
													duration: 2000
												})
											}
										})
									} else {
										uni.showToast({
											title: '授权登录失败！',
											mask: true,
											icon: 'none',
											duration: 2000
										})
									}
								})
							}
						})
					} else {
						uni.showToast({
							title: '授权失败，请确认授权已开启',
							mask: true,
							icon: 'none'
						})
					}
				});
			},
			merchantList() {
				var arr = {
					page: 1,
					pageSize: 10,
				}
				mchUser(arr).then(res => {
					console.log(res)
					const code = res.data.code;
					if (code == "000000") {
						if (res.data.data.total == 1) {
							// if (res.data.data.rows[0].type == 1) {
							// 	this.$store.dispatch('changeTabbar', tabBar.tab1)
							// } else if (res.data.data.rows[0].type == 2) {
							// 	this.$store.dispatch('changeTabbar', tabBar.tab2)
							// } else {
							// 	this.$store.dispatch('changeTabbar', tabBar.tab3)
							// }
							this.$store.dispatch('changeTabbar', tabBar.tab1)
							uni.setStorageSync('listData', res.data.data.rows[0]);
							wx.switchTab({
								url: '/pages/Home/index'
							})
						} else {
							uni.setStorageSync('loginName', this.query.loginName);
							wx.redirectTo({
								url: '/pages/merchant/index?bound=' + "0"
							})
						}
					}
				}).catch(err => {
					// console.log(err)
				})
			},
			//获取用户的当前设置
			getSetting() {
				return new Promise(function(resolve, reject) {
					uni.getSetting({
						success: function(res) {
							if (res.authSetting['scope.userInfo']) {
								console.log('存在');
								resolve(true);
							} else {
								console.log('不存在');
								resolve(false);
							}
						}
					})
				}).catch((e) => {
					console.log(e)
				});;
			},
			CAPTCHA() {
				wx.navigateTo({
					url: '/pages/login/create'
				})
			},
			forget() {
				wx.navigateTo({
					url: '/pages_subPack/login/account/modify'
				})
			},
			buttonText() {
				wx.navigateTo({
					url: '/pages_subPack/login/account/index'
				})
			}
		}
	}
</script>

<style>
	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
	}

	.img-wrap {
		height: 25%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.img {
		width: 450rpx;
		height: 100rpx;
	}

	.button-area {
		margin-left: 10%;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.button-input {
		margin-top: 10%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.input {
		width: 80%;
	}

	.input1 {
		margin-top: 20rpx;
		width: 80%;
	}

	.uv-input__content__prefix-icon {
		margin-right: 20px !important;
	}

	.uv-input {
		height: 100rpx;
		background: #efefef;
		border-radius: 11px !important;
		/* 可以添加其他样式，如字体大小、边框等 */
	}

	.uv-input:focus {
		border: 2px solid #4A90E2;
		background: #4A90E2;
		/* 修改为蓝色边框 */
		outline: none;
		/* 去除默认的轮廓线 */
	}

	.button-wrap {
		margin-top: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.account-text {
		display: flex;
		align-items: center;
		justify-content: center;
	}


	.button-login {
		width: 80%;
		height: 110rpx;
		border-radius: 20rpx;
		background: #222d65;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.button-create {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.create {
		width: 30%;
		height: 110rpx;
		background: #179bd7;
		border-radius: 20rpx;
		line-height: 100rpx;
	}

	.create1 {
		width: 30%;
		height: 110rpx;
		background: #23ac56;
		border-radius: 20rpx;
		line-height: 100rpx;
	}

	.loginText1 {
		margin-left: 6rpx;
		color: #fff;
		font-size: 35rpx;
	}

	.wx-text {
		margin-top: 10%;
	}

	.wx-text-1 {
		margin-top: 10%;
		color: #1f9bd8;
	}

	.text1 {
		color: #242f66;
		font-size: 30px;
	}

	.text2 {
		color: #1f9bd8;
		font-size: 15px;
		margin: 10% 0% 1% 0%;
	}

	.text3 {
		font-size: 15px;
		color: #1f9bd8;
	}
</style>